<template>
  <el-dialog  title="选择进项发票" :visible.sync="dialogVisible" width="1400px" :close-on-click-modal="false"
    append-to-body :modal-append-to-body="false" @close="dialogVisible=false" v-drag2anywhere >
    <el-form :model="filterData" ref="filterForm"  size="mini" label-width="0">
      <el-row :gutter="20">
        <el-col  style="width: 300px;display: flex">
          <div style="width: 120px; line-height: 30px;">进项发票号:</div>
          <el-input v-model="filterData.num" placeholder="进项发票号码"  size="mini" clearable></el-input>
        </el-col>
        <el-col  style="width: 300px;display: flex">
          <div style="width: 90px; line-height: 30px;">货物名称:</div>
          <el-input v-model="filterData.title" placeholder="货物或服务名称"  size="mini" clearable></el-input>
        </el-col>




        <el-col  style="width: 300px;display: flex">
          <div style="width: 90px; line-height: 30px;">购方名称:</div>
          <el-input v-model="filterData.buyer" placeholder="购方名称"  size="mini" clearable></el-input>
        </el-col>

        <el-col  style="width: 300px;display: flex">
          <div style="width: 90px; line-height: 30px;">销方单位:</div>
          <el-input v-model="filterData.seller" placeholder="销方单位"  size="mini" clearable></el-input>
        </el-col>

        <el-col style="width: 100px;">
          <el-form-item label="">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div style="line-height: 30px; text-align: right; height:30px; color: #00aaff;">溫馨提示:请根据实际情况勾选进项票</div>
          <div style="height: 400px; overflow-y: auto;border: 1px solid #E3E3E3; border-top: none;">
          <el-table :data="tableData" ref="tableData" border style="width: 100%;" @select-all="handleSelectionChange"  @select="handleSelectionChange" >
            <el-table-column label="选择" type="selection" width="45px" align="center"></el-table-column>
            <el-table-column label="详情" type="expand">
              <template v-slot="scope">
                 <div style="padding-left:50px;">
                    <el-table :data="scope.row.goods">
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column label="类型" prop="type" width="120px" align="center"></el-table-column>
                        <el-table-column label="税收分类及服务名称">
                          <template v-slot="scope1">
                              *<span> {{scope1.row.taxname}} </span>*  {{scope1.row.title}}
                          </template>
                        </el-table-column>
                        <el-table-column label="规格型号" prop="model"></el-table-column>
                        <el-table-column label="单位" width="80px" prop="unit" align="center"></el-table-column>
                        <el-table-column label="单价"  width="120px" prop="price" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column label="税率"  width="80px" prop="rate" align="center">
                          <template v-slot="scope1">
                            {{scope1.row.rate*100}}%
                          </template>
                        </el-table-column>
                        <el-table-column label="税额"  width="110px" prop="tax" align="center"></el-table-column>
                        <el-table-column label="价税总额" width="140px" prop="sum" align="center"></el-table-column>
                        <el-table-column label="备注"  prop="memo"></el-table-column>
                    </el-table>
                 </div>
              </template>
            </el-table-column>
            <el-table-column label="开票日期" prop="date" width="140px"></el-table-column>
            <el-table-column label="类型" prop="type" width="120px"></el-table-column>
            <el-table-column label="进项或数电票号" prop="fphm" width="160px"></el-table-column>
            <el-table-column label="购方名称" prop="buyer" show-overflow-tooltip></el-table-column>
            <el-table-column label="金额"  prop="total" v- align="center" width="95px"></el-table-column>
            <el-table-column label="税额"  prop="tax" align="center" width="80px"></el-table-column>
            <el-table-column label="价税合计" prop="sum" align="center" width="120px"></el-table-column>
            <el-table-column label="备注" prop="dmemo" align="center" width="100px"></el-table-column>
            <el-table-column label="开票方名称" prop="seller" width="200px"  show-overflow-tooltip></el-table-column>
          </el-table>
          </div>
          <div>
            <div style="height: 30px; line-height: 30px;">选中项总金额: {{sum_select}}</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;">
      <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
        :current-page="curpage" prev-text="上一页"  next-text="下一页"  :page-sizes="[10, 20, 30]" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selection.length<=0">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        index:-1,
        filterData:{
          title:'',
          num:'',
          model:'',
          supname:''
        },
        sum_select:0,
        numrows:1,
        curpage:1,
        pagesize:10,
        selection:[],
        tableData:[],
        dialogVisible:false
      }
    },
    methods:{
      init(index,buyer,seller){
        console.log(index,buyer,seller);
        this.index=index;
        this.filterData={
          title:'',
          fhpm:'',
          title:'',
          buyer:buyer,
          seller:seller,
          model:''
        }
        this.loadDataList();
      },
      handleSelectionChange(selection){
        this.selection=selection;
      },
      loadDataList(){
        const params={
          title:this.filterData.title,
          model:this.filterData.model,
          fphm:this.filterData.num,
          seller:this.filterData.seller,
          buyer:this.filterData.buyer,
          curpage:this.curpage,
          pagesize:this.pagesize
        }
        this.axios.post("api/admin/saleticket/popup4ordersaleticket", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows=res.data.numrows;
          }
        })
      },
      handleSearch(){
        this.curpage=1;
        this.loadDataList();
      },
      handleSave(){
        //获取已经选中数据
        this.$emit("completeHandler",this.index,this.selection);
        this.dialogVisible=false;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
    }
  }
</script>

<style>
</style>
